<template>
	<view class="container">
		<view class="user_header">
			<img class="bg" src="../static/images/user-bg.jpg" alt="请刷新" >
			<view class="user-info-box" >
				<view class="portrait-box" @click="handle">
					<image class="portrait" :src="userData.url || '/static/images/missing-face.png'" ></image>
				</view>
				<view class="info-box">
					<text class="username">{{userData.username1||'游客'}}</text>
				</view>
			</view>
			<view class="vip-card-box">
				<image class="card-bg" src="/static/images/vip-card-bg.png" mode=""></image>
				<view class="b-btn">
					立即开通
				</view>
				<view class="tit">
					<image class="iconVip" src="../../static/vip.png"></image>
					<text class="yticon icon-iLinkapp"></text>
					轻松购会员
				</view>
			</view>
		</view>
		<view class="text-area">
			<!-- <image class="bg" src="../static/images/user-bg.jpg"></image> -->
			<view class="tj-sction">
				<view class="tj-item">
					<text class="num">128.8轻松币</text>
					<text>余额</text>
				</view>
				<view class="tj-item">
					<text class="num">0</text>
					<text>优惠券</text>
				</view>
				<view class="tj-item">
					<text class="num">20</text>
					<text>积分</text>
				</view>
			</view>
		</view>
		<view class="shoppinginfo">
			<van-grid border="flase">
				<van-grid-item icon="failure" text="全部订单" link-type="navigateTo" url="../order/order" />
				<van-grid-item icon="balance-pay" text="待付款" link-type="navigateTo" url="../order/order" />
				<van-grid-item icon="completed-o" text="待收货" link-type="navigateTo" url="../order/order" />
				<van-grid-item icon="cash-back-record-o" text="退款/售后" link-type="navigateTo"
					url="../orderForm/orderForm" />
			</van-grid>
		</view>
		<view class="myinfo">
			<van-cell-group>
				<van-cell title="浏览历史" icon="clock-o" link-type="navigateTo" url="../login/login">
					<text class="register"></text>
				</van-cell>
				<van-cell title="我的钱包" value="会员还有三天过期" icon="balance-o" border="{{ false }}" link-type="navigateTo"
					url="../login/login">
					<van-icon slot="right-icon" name="arrow" />
				</van-cell>
				<van-cell title="地址管理" icon="location-o" border="{{ false }}" link-type="navigateTo"
					url="../login/login">
					<van-icon slot="right-icon" name="arrow" />
				</van-cell>
				<van-cell title="分享" value="邀请好友赢10万大礼" icon="link-o" border="{{ false }}" value-class="myvalue"
					@click="showShare = true">
					<van-icon slot="right-icon" name="arrow" />

				</van-cell>
				<van-cell title="晒单" value="晒单抢红包" icon="chat-o" border="{{ false }}" value-class="myvalue">
					<van-icon slot="right-icon" name="arrow" />
				</van-cell>
				<van-cell title="我的收藏" icon="star-o" border="{{ false }}">
					<van-icon slot="right-icon" name="arrow" />
				</van-cell>
				<van-cell title="设置" icon="setting-o" border="{{ false }}" link-type="navigateTo"
					url="../setting/setting">
					<van-icon slot="right-icon" name="arrow" />
				</van-cell>
			</van-cell-group>
			<van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @cancel="close" />
		</view>
		<!-- <uni-link :href="href" :text="href"></uni-link> -->
	</view>
</template>

<script>
	export default {
			data() {
				return {
					showShare: false,
					login: 1,
					userData: {
						token: '',
						username1: '',
						url: '',
						username1: '',
						id: '',
						ok: ''
					},
					options: [{
							name: '微信',
							icon: 'wechat'
						},
						{
							name: '微博',
							icon: 'weibo'
						},
						{
							name: '复制链接',
							icon: 'link'
						},
						{
							name: '分享海报',
							icon: 'poster'
						},
						{
							name: '二维码',
							icon: 'qrcode'
						},
					],
				};
			},
	
			methods: {
				handle() {
					uni.navigateTo({
						url: "../longing/longing"
					});
				},
				clearData() {
					// 清除当前页面的数据
					this.userData = {
						token: '',
						username1: '',
						url: '',
						username1: '',
						id: '',
						ok: ''
					};
				},
				onClearData() {
					this.clearData();
				},
				getToken() {
					uni.getStorage({
						key: 'userData',
						success: (res) => {
							this.userData = res.data;
							this.login = 1;
							console.log('获取到的userData：', this.userData);
							// 在这里可以根据需要处理获取到的token，比如保存到data中以便页面使用
						},
						fail: (err) => {
							console.error('获取userData 失败', err);
							// 处理获取失败的情况，可以提示用户或者执行其他操作
							// 设置为未登录状态
							this.userData = {};
							this.login = 0;
						},
					});
				},
				onSelect(option) {
					Toast(option.name);
					this.showShare = false;
				},
				close() {
					this.showShare = false;
					console.log(option.name);
				},
				jumpToOverMissionList() {
					uni.navigateTo({
						url: "../longing/longing?returnToCurrentPage=true",
					});
				},
				onShow() {
					this.getToken();
				},
				tzcou() {
					console.log(123);
					wx.navigateTo({
						url: "coupon"
					});
				},
				jumpToOverMissionLista() {
					console.log(1123);
					wx.switchTab({
						url: "coupon"
					});
				},
			},
			onShow() {
				this.getToken();
			},
			onLoad(query) {
				this.userData = getApp().globalData.userData;
				console.log('从全局变量中获取到 userData :', this.userData);
			}
		};
	</script>

<style lang="scss">
	.register {
		display: block;
		height: 80px;
	}

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}

	.user_header {
		height: 322rpx;
		padding: 100rpx 30rpx 0;
		position: relative;
		overflow: hidden;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			opacity: .7;
		}

		.user-info-box {
			height: 180upx;
			display: flex;
			align-items: center;
			position: relative;
			z-index: 1;

			.portrait {
				width: 130upx;
				height: 130upx;
				border: 5upx solid #fff;
				border-radius: 50%;
			}

			.username {
				font-size: 17px;
				color: #36343c;
				margin-left: 20upx;
			}
		}

		.vip-card-box {
			display: flex;
			flex-direction: column;
			color: #f7d680;
			height: 240upx;
			border-radius: 16upx 16upx 0 0;
			overflow: hidden;
			position: relative;
			top: -12px;
			padding: 20upx 24upx;

			.card-bg {
				position: absolute;
				top: 20upx;
				right: 0;
				width: 380upx;
				height: 260upx;
			}

			.b-btn {
				position: absolute;
				right: 20upx;
				top: 16upx;
				width: 132upx;
				height: 40upx;
				text-align: center;
				line-height: 40upx;
				font-size: 22upx;
				color: #36343c;
				border-radius: 20px;
				z-index: 1;
			}

			.tit {
				font-size: 14px;
				color: #cbaf69;
				margin-top: -16upx;
				margin-left: 20upx;

				.iconVip {
					width: 40upx;
					height: 40upx;
					margin-right: -30upx;
					margin-top: 4upx;
				}

				.yticon {
					color: #f6e5a3;
					margin-right: 16px;
					margin-top: -50px;

					.icon-iLinkapp {
						color: red;
					}
				}
			}

			.e-b {
				font-size: 16px;
				color: #d8cba9;
				margin-top: 10upx;
			}
		}

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
	}

	.text-area {
		.tj-sction {
			width: 95%;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			margin: auto;
			height: 60px;
			;
			margin-top: 10px;
			background-color: #fff;
			border-radius: 5px;
		}

		.tj-item {
			display: flex;
			flex-direction: column;
			width: 80px;
			font-size: 11px;
			color: #75787d;
			text-align: center;
		}

		.num {
			font-size: 13px;
			color: #36343c;
			margin-bottom: 8upx;
		}
	}

	.intro {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.shoppinginfo {
		width: 95%;
		margin: 0 auto;
		margin-top: 10px;
	}

	.myinfo {
		width: 95%;
		margin: 0 auto;
		margin-top: 10px;

	}

	.myvalue {
		font-size: 10px;
	}
</style>